window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var stage = new createjs.Stage(canvas);

    // Enable touch interactions if supported on the current device
    createjs.Touch.enable(stage);

    // Set the background to black
    var background = new createjs.Shape();
    background.graphics.beginFill("black").drawRect(0, 0, canvas.width, canvas.height);
    stage.addChild(background);

    // Preload the images
    var queue = new createjs.LoadQueue();
    queue.on("complete", handleComplete, this);
    queue.loadManifest([
        { id: "turntable", src: "turntable.png" },
        { id: "arrowBtn", src: "arrow_btn.png" }
    ]);

    var turntableBitmap;
    var isRotating = false;
    var rotationSpeed = 8;

    function handleComplete() {
        var turntableImage = queue.getResult("turntable");
        turntableBitmap = new createjs.Bitmap(turntableImage);

        // Calculate the scale to fit the image within the canvas
        var scale = Math.min((canvas.width - 60) / turntableImage.width, (canvas.height - 60) / turntableImage.height);
        turntableBitmap.scaleX = turntableBitmap.scaleY = scale;

        // Set the registration point (rotation center) to the center of the image
        turntableBitmap.regX = turntableImage.width / 2;
        turntableBitmap.regY = turntableImage.height / 2;

        // Center the image
        turntableBitmap.x = canvas.width / 2;
        turntableBitmap.y = canvas.height / 2 + 30;

        stage.addChild(turntableBitmap);

        // Load and add the button image
        var arrowBtnImage = queue.getResult("arrowBtn");

        var spriteSheet = new createjs.SpriteSheet({
            images: [arrowBtnImage],
            frames: {width: arrowBtnImage.width / 2, height: arrowBtnImage.height},
            animations: { out: 0, over: 0, down: 1 }
        });
        var arrowBtnBitmap = new createjs.Sprite(spriteSheet, "out");

        arrowScale = turntableImage.width * scale * 0.2 * 2 / arrowBtnImage.width;
        arrowBtnBitmap.scaleX = arrowBtnBitmap.scaleY = arrowScale;
        arrowBtnBitmap.regX = arrowBtnImage.width / 2 / 2;
        arrowBtnBitmap.regY = arrowBtnImage.height / 2 + 30;
        arrowBtnBitmap.x = turntableBitmap.x;
        arrowBtnBitmap.y = turntableBitmap.y;
        arrowBtnBitmap.cursor = "pointer";

        // Create a ButtonHelper for the button
        new createjs.ButtonHelper(arrowBtnBitmap, "out", "over", "down");

        arrowBtnBitmap.on("mousedown", function() {
            arrowBtnBitmap.gotoAndStop("down");
            stage.update();
        });

        arrowBtnBitmap.on("pressdown", function() {
            arrowBtnBitmap.gotoAndStop("down");
            stage.update();
        });

        arrowBtnBitmap.on("click", handleClick);

        stage.addChild(arrowBtnBitmap);
        stage.update();
    }

    function handleClick() {
        if (isRotating) {
            var randomRotation = Math.random() * 360;
            createjs.Tween.get(turntableBitmap)
                .to({ rotation: turntableBitmap.rotation + rotationSpeed * 45 + randomRotation }, 3000, createjs.Ease.quadOut)
                .call(() => { isRotating = false; });
        } else {
            isRotating = true;
        }
    }

    createjs.Ticker.framerate = 60;
    createjs.Ticker.on("tick", handleTick);
    function handleTick(event) {
        if (isRotating && turntableBitmap) {
            turntableBitmap.rotation += rotationSpeed;
            stage.update();
        }
    }
};
